<template>
    <div id="app">
        <v-header :seller="seller"></v-header>
        <div class="tab-wrapper">
            <tab :tabs="tabs" :initialIndex=0></tab>
        </div>
    </div>
</template>

<script>

    // 头组件 v-header防止与html5标签的header冲突
    import VHeader from 'components/v-header/v-header'
    // 区块导航组件
    import Tab from 'components/tab/tab'
    // 商品组件
    import Goods from 'components/goods/goods'
    // 评价组件
    import Ratings from 'components/ratings/ratings'
    // 商家介绍组件
    import Seller from 'components/seller/seller'

    import qs from 'query-string'

    import { getSeller } from 'api'

    export default {
        name: 'app',
        data() {
            return {
                seller: {
                    // 取得url中id字段
                    id: qs.parse(location.search).id
                }
            }
        },
        computed: {
            tabs() {
                return [
                    { label: '商品', component: Goods, data: { seller: this.seller } },
                    { label: '评价', component: Ratings, data: { seller: this.seller } },
                    { label: '商家', component: Seller, data: { seller: this.seller } }
                ]
            }
        },
        created() {
            this._getSeller()
        },
        methods: {
            // 取得seller数据
            _getSeller() {
                getSeller({
                    id: this.seller.id
                }).then((seller) => {
                    this.seller = seller
                })
            }
        },
        // 组件注册
        components: {
            VHeader,
            Tab
        }

    }
</script>

<style lang="stylus">
    #app
        .tab-wrapper
            position: fixed
            top: 136px
            left: 0
            right: 0
            bottom: 0
</style>
